<template>
  <div class="k-header" >
    <div >
      <div class="k-header-inner k-w">
        <a href="" class="logo">
          <img src="">
        </a>
        <div class="search">
          <input class="search-input" v-model="search" type="text" placeholder="请输入搜索内容" @keyup.enter="doSearch">
          <div class="search-icon" @click="doSearch"></div>
        </div>
        <ul class="func-section">
          <li class="upload-btn" @click="doUpload">
            上传文件
          </li>
          <li>
            我的审核
          </li>
          <li @click="gotoMyMsg">
            我的信息
          </li>
        </ul>
      </div>
      <!-- 文件上传 -->
      <el-dialog title="选择要上传的文件" :visible.sync="dialogUploadVisible">
        <el-upload class="header-upload" drag action='https://jsonplaceholder.typicode.com/posts/' multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogUploadVisible = false">取 消</el-button>
          <el-button type="primary" @click="doUploadDetail">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 完善文件资料 -->
      <!-- todo 字段暂时填充 -->
      <el-dialog title="完善文件资料" :visible.sync="dialogDetailVisible" :modal="false">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="即时配送">
            <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
              <el-radio label="线上品牌商赞助"></el-radio>
              <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label-width="80px">
            <el-button type="primary" >立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
   
  </div>
</template>

<script>
  import {
    mapMutations,mapGetters
  } from 'vuex';
  import {
    NS
  } from 'fac/constant'
  const NS_HOME = NS.HOME;
  const NS_SEARCH = NS.SEARCH;
  const NS_PERSONAL = NS.PERSONAL;
  const NS_PAGINATION = NS.PAGINATION;
  export default {
    name: 'header',
    data() {
      return {
        dialogUploadVisible: false,
        dialogDetailVisible: false,
        search: '',
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      }
    },
    computed: {
    },
    methods: {
      ...mapMutations(NS_SEARCH, ['setSearchStr']),
      //公共搜索，切换当前路由的search query
      doSearch() {
        //如果当前搜索非空
        if (this.search.trim()) {
          //保存搜索字符串
          this.setSearchStr(this.search);
          let query = Object.assign({}, this.$route.query);
          query.search = this.search;
          this.$router.replace({
            query
          });
        }
      },
      doUpload() {
        this.dialogUploadVisible || (this.dialogUploadVisible = true);
      },
      doUploadDetail() {
        this.dialogUploadVisible = false;
        this.dialogDetailVisible = true;
      },
      gotoMyMsg() {
        this.$route.meta !== 'message' &&
          (console.log('gotoMyMsg'), this.$router.push({
            path: '/personal/message'
          }));
      }
    },
    mounted() {
      let str = this.$route.query.search && this.$route.query.search.trim()
      str && this.setSearchStr(str);
    }
  }

</script>